<template>
    <div class="detail-container">
        <div class="detail">
            <div class="movie-fliter"></div>
            <div class="img_bg" v-if="filmDetail.albumImg" :style="{backgroundImage: `url(${filmDetail.albumImg})`}"></div>
            <div class="img_bg" v-else :style="{backgroundImage: `url(${picFix(filmDetail.img)})`}"></div>
            <div class="detail-info">
                <img :src="picFix(filmDetail.img)">
                <span class="info">
                    <h1>{{filmDetail.nm}}</h1>
                    <span>{{filmDetail.enm}}</span>
                    <span>{{filmDetail.bingeWatch}}想看</span>
                    <span>{{filmDetail.cat}}</span>
                    <span>{{filmDetail.src}}/{{filmDetail.episodeDur}}分钟</span>
                    <span>{{filmDetail.pubDesc}}</span>
                </span>
                <router-link :to="'/film/detail/'+filmDetail.id"><span class="mui-icon mui-icon-arrowright mui-icon-zzd"></span></router-link>
            </div>
        </div>
        <div class="cinema">
            <!-- <a class="" v-for="time in dateList" :key="time">{{time}}</a> -->
            <div id="slider" class="mui-slider">
                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <div class="mui-scroll">
                        <a :class="['mui-control-item',i === release ? 'mui-active':'']" v-for="(time,i) in dateList" :key="i"
                        @tap="getCinemaList(i,0,1)">
                            {{time}}
                        </a>
                    </div>
                </div>
            </div>

            <ul class="list-data"
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="loading"
                infinite-scroll-distance="10"
                infinite-scroll-immediate-check="check"
                :infinite-scroll-listen-for-event='getClick(selected)'>
                <router-link :to="'/film/cinema/'+filmId+'/'+item.id" v-for="item in cinemaList" :key="item.id"  tag="li">
                    <div>
                        <span class="span1">
                            <span>{{item.nm}}</span><span>{{item.sellPrice}}</span>元起
                        </span>
                        <span class="span2">{{item.addr}}</span>
                        <span class="span3" v-if="item.promotion.cardPromotionTag"><img src="../../images/ka.png">{{item.promotion.cardPromotionTag}}</span>
                        <span class="span4">近期场次:{{item.showTimes}}</span>
                    </div>
                    <span class="span5">{{item.distance}}</span>
                </router-link>
            </ul>
            <div class="loading" v-show="maxCinema">
                <mt-spinner color="rgb(100, 100, 100)" type="fading-circle"></mt-spinner>
            </div>
            <!-- <div class="cinema-list">
                <ul>
                    <li v-for="item in cinemaList" :key="item.id">{{ item.nm }}</li>
                </ul>
            </div> -->
            <!-- <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
                <ul>
                    <li v-for="item in cinemaList" :key="item.id">{{ item.nm }}</li>
                </ul>
            </mt-loadmore> -->
        </div>
    </div>
</template>
<script>
import qs from "qs";
import mui from '../../lib/js/mui.min.js'
import { Indicator } from 'mint-ui';
export default {
    data(){
        return{
            filmId:this.$route.params.id,
            filmDetail:{},
            cinemaList:[],
            // day:
            dateList:{},
            release:"",
            offset:0,
            loading:false,
            check:false,
            selected:"",
            sel:"",
            maxCinema:0
            // sell:JSON.parse(localStorage.getItem('selected') || '[]')
        }
    },
    created(){
        this.getFilmDetail()
        // console.log(this.filmDetail.nm)
        // console.log(this.getDayCount(2019,8))
        // this.getCinemaList(this.release, )
        console.log(this.dateList + "111")
        console.log(this.sel + "1111111111")
    },
    mounted(){
        mui('.mui-scroll-wrapper').scroll({
            deceleration:0.0005
        });
    },
    methods:{
        picFix(wh) {
            if (wh !== undefined) {
                return wh.replace("w.h", "110.150");
            }
        },
        getDateDay(d){
            switch (d) {
                case 0:
                    d = "周日";
                    break;
                case 1:
                    d = "周一";
                    break;
                case 2:
                    d = "周二";
                    break;
                case 3:
                    d = "周三";
                    break;
                case 4:
                    d = "周四";
                    break;
                case 5:
                    d = "周五";
                    break;
                case 6:
                    d = "周六";
            } 
            return d
        },
        getDayCount(year,month){
            var d = new Date(year, month, 0);
            return d.getDate();
        },
        jialing(s){
            return s < 10 ? '0' + s: s;
        },
        getClick(str){
            console.log(str +"ccccccc")
            
        },
        loadMore(){
            console.log("aaaaaaaabbbbbbbb")
            this.offset += 20 ;
            // console.log(selected + "12222222222")
            this.loading = true;
            var sell=JSON.parse(localStorage.getItem('sell'))
            console.log(sell + "1111111112222222333333333")
            setTimeout(() => {
                // let last = this.cinemaList[this.cinemaList.length - 1];
                // for (let i = 1; i <= 10; i++) {
                //     this.list.push(last + i);
                // }
                this.getCinemaList(sell,this.offset)
                this.loading = false;
            }, 1000);
        },
        // loadBottom(day) {
        //     // 加载更多数据
        //     this.offset += 10;
        //     this.getCinemaList(day)
        //     this.allLoaded = true;// 若数据已全部获取完毕
        //     this.$refs.loadmore.onBottomLoaded();
        // },
        compareDate(d1,d2){
            return ((new Date(d1.replace(/-/g,"\/"))) > (new Date(d2.replace(/-/g,"\/"))));
        },
        getFilmDetail(){
            this.$http.get('detailmovie',{
                params:{
                    movieId:this.filmId
                }
            }).then(result=>{
                if(result.status==200){
                    console.log(result)
                    this.filmDetail=result.body.detailMovie
                    var day = new Date(Date.parse(result.body.detailMovie.rt.replace(/-/g, "/"))); 
                    // console.log(day)
                    var dax = day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate();
                    // console.log(dax)
                    // console.log(this.getDateDay(1))
                    // console.log(typeof(day.getDay()))
                    // console.log( this.getDateDay(day.getDay()))
                    // var currentDate = new Date();
                    // var str = this.jialing(currentDate.getFullYear()) + "-" +  this.jialing((currentDate.getMonth() + 1)) + "-" +  this.jialing(currentDate.getDate());
                    // var today = new Date(str);
                    // console.log(today)
                    var currentDate = new Date();
                    var today = currentDate.getFullYear() + "-" + (currentDate.getMonth() + 1) + "-" + currentDate.getDate();
                    var dayy = new Date()
                    var dayyy = new Date()
                    // console.log(today)
                    // if(dayyy==dayyyy){
                    //     console.log("aaaaaaaaa")
                    // }
                    var year = this.compareDate(dax,today) ? day.getFullYear():currentDate.getFullYear()
                    var month = this.compareDate(dax,today) ? this.jialing(day.getMonth()+1):this.jialing(currentDate.getMonth()+1)
                    console.log(month)
                    var date = this.compareDate(dax,today) ? this.jialing(day.getDate()):this.jialing(currentDate.getDate())
                    var dateCount = this.getDayCount(year,month)
                    var weeknum = this.compareDate(dax,today) ? day.getDay():currentDate.getDay()
                    var week = this.getDateDay(weeknum)
                    dayy =week +" "+ year +"-"+ month + "-" + date;
                    dayyy = year +"-"+ month + "-" + date;
                    console.log(this.compareDate(today,dayyy))
                    this.release = dayyy
                    console.log(this.release)
                    this.dateList[dayyy] =dayy
                    // dayy = this.getDateDay(day.getDay())+" "+day.getFullYear()+"-"+(day.getMonth()+5)+"-"+day.getDate()
                    // console.log(dayy)
                    for(var i=1; i<7; i++){
                        if(year==12 && date==dateCount){
                            weeknum = weeknum + 1
                            if(weeknum==7){
                                weeknum = 0
                            }
                            year = year + 1
                            month = this.jialing(1)
                            date = this.jialing(1)
                            week = this.getDateDay(weeknum)
                            dayy =week +" "+ year +"-"+ month + "-" + date;
                            dayyy = year +"-"+ month + "-" + date;
                            this.dateList[dayyy] =dayy
                        }
                        else if(date==dateCount){
                            weeknum = weeknum + 1
                            if(weeknum==7){
                                weeknum = 0
                            }
                            year = year
                            month = this.jialing(parseInt(month) + 1)
                            date = this.jialing(1)
                            week = this.getDateDay(weeknum)
                            dayy =week +" "+ year +"-"+ month + "-" + date;
                            dayyy = year +"-"+ month + "-" + date;
                            this.dateList[dayyy] =dayy
                        }else{
                            weeknum = weeknum + 1
                            if(weeknum==7){
                                weeknum = 0
                            }
                            year = year
                            month = month
                            date = this.jialing(parseInt(date) + 1)
                            week = this.getDateDay(weeknum)
                            dayy =week +" "+ year +"-"+ month + "-" + date;
                            dayyy = year +"-"+ month + "-" + date;
                            this.dateList[dayyy] =dayy
                        }
                        // var dayy = this.getDateDay(day.getDay())+" "+day.getFullYear()+"-"+(day.getMonth()+1)+"-"+day.getDate()
                        // this.dateList =this.date.concat(dayy)
                    }

                    // var dayy = this.getDateDay(day.getDay())+" "+day.getFullYear()+"-"+(day.getMonth()+5)+"-"+day.getDate()
                    // // console.log(dayy)
                    // this.date =this.date.concat(dayy)
                    // console.log(day.getDay()+"-"+day.getFullYear()+"-"+(day.getMonth()+1)+"-"+day.getDate())
                    console.log(this.dateList)
                    // console.log(this.filmDetail.nm)
                    this.$store.commit("changeTitle",this.filmDetail.nm);
                    this.getCinemaList(this.release,this.offset)
                }
            })
        },
        getCinemaList(day,offset,clear){
            // console.log(day)
            if(clear){
                console.log(clear + "abcdef")
                console.log("123456789")
                this.offset = 0;
                this.cinemaList = []
                console.log(this.cinemaList.length+"ajadsfoidhsf")
                Indicator.open({
                    text: '加载中...',
                    spinnerType: 'fading-circle'
                });
            }
            console.log(offset + "a")
            this.selected = day;
            // var sell=JSON.parse(localStorage.getItem('selected') || '[]')
            localStorage.setItem('sell', JSON.stringify(day))
            console.log(this.selected + "2")
            this.axios.post("/movie",
                 qs.stringify({
                    movieId:this.filmId,
                    day:day,
                    offset:offset,
                    limit:20,
                    districtId:-1,
                    lineId:-1,
                    hallType:-1,
                    brandId:-1,
                    serviceId:-1,
                    areaId:-1,
                    stationId:-1,
                    item:"",
                    updateShowDay:true,
                    reqId:new Date().getTime(),
                    cityId:20
                 })
            ).then(result=>{
                this.maxCinema = result.data.cinemas.length
                if(result.data.cinemas.length!=0){
                    console.log(result)
                    // if(!this.cinemaList){
                    //     this.cinemaList=[]
                    // }
                    setTimeout(() => {
                        for(var i=0; i<result.data.cinemas.length; i++){
                            if(this.cinemaList.indexOf(result.data.cinemas[i])==-1){
                                this.cinemaList= this.cinemaList.concat(result.data.cinemas[i])
                            }
                        }
                        Indicator.close();
                    },500)    
                }
                console.log(this.cinemaList)
            })

        }
    },
    watch:{
        selected(val, oldVal){
            console.log(val+"a", oldVal+"b")
            this.sel = val 
        }
    }
}
</script>
<style lang="scss" scoped>
*{
    touch-action: pan-y;
}
.mint-header{
    background-color: red;
    padding: 25px 0;
    font-size: 18px;
}
.detail-container{
    overflow: hidden;
    .detail{
        position: relative;
        left: 0;
        width: 100%;
        height: 188px;
        .movie-fliter {
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-color: #333;
        }
        .img_bg {
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            position: absolute;
            -webkit-filter: blur(0.5rem);
            filter: blur(0.5rem);
            background-size: cover;
            background-repeat: no-repeat;
            opacity: .55;
        }  
        .detail-info{
            display: flex;
            color: lightgray;
            justify-content: space-around;
            padding-left: 12px;
            padding-top: 15px;
            .info{
                h1{
                    font-size: 20px;
                    color: #fff;
                }
                span{
                    font-size: 12px;
                }
                span:nth-child(3){
                    font-size: 18px;
                    font-weight: bold;
                    color: orange;
                }
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .mui-icon-zzd{
                color: lightgray; 
                margin-top: 60px;
            }
        }
    } 
    .cinema{
        .mui-active{
            color: red;
            border-color: red;
        }
//         .list-data{
//             // height: 100%;
//             
//         }
        .list-data{
            list-style: none;
            margin: 0;
            padding: 0;
            li{
                padding: 10px 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                div{
                    width: 280px;
                    display: flex;
                    flex-direction: column;
                    .span1{
                        direction: flex;
                        justify-content: space-between;
                        font-size:12px;
                        white-space:nowrap; 
                        color: red;
                        :nth-child(1){
                            font-size: 16px;
                            font-weight: bold;
                            color: #333;
                        }
                        :nth-child(2){
                            font-size: 18px;
                            color:red;
                            margin-left: 5px;
                        }
                    }
                    .span2{
                        font-size: 12px;
                        width: 100%;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                        color: rgb(121, 120, 120);
                    }
                    .span3{
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        color: rgb(138, 138, 138);
                        img{
                            width: 20px;
                            height: 20px;
                            margin-right: 3px;
                        }
                    }
                    .span4{
                        font-size: 12px;
                        color: #333;
                    }
                }
                .span5{
                    font-size: 12px;
                    color: #333;
                }
            }
        }
    }
}
</style>
